Adwaita: fix thin paned separators

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 063c8d9af80d6f6ae482c383bc567d6bd74b65e7..b2969d741db18a23a0fd374cf1f53783c9ab29de 100644 (file)
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3056,23 +3056,34 @@ paned {
   > separator {
     min-width: 1px;
     min-height: 1px;
-    background-color: $borders_color;
-    &:backdrop { background-color: $backdrop_borders_color; }
-    &:selected { background-color: $selected_bg_color; }
-  }
-  &:dir(ltr).horizontal > separator {
-    margin: 0 -8px 0 0;
-    padding: 0 8px 0 0;
+    -gtk-icon-source: none; // defeats the ugly default handle decoration
+    background-color: transparent;
+    background-image: linear-gradient(to top, $borders_color);
+    background-size: 1px 1px;
+    &:selected { background-image: linear-gradient(to top, $selected_bg_color); }
+    &:backdrop { background-image: linear-gradient(to top, $backdrop_borders_color); }
   }
-  &:dir(rtl).horizontal > separator {
-    margin: 0 0 0 -8px;
-    padding: 0 0 0 8px;
+  &.horizontal > separator {
+    background-repeat: repeat-y;
+    &:dir(ltr) {
+      margin: 0 -8px 0 0;
+      padding: 0 8px 0 0;
+      background-position: left;
+    }
+    &:dir(rtl) {
+      margin: 0 0 0 -8px;
+      padding: 0 0 0 8px;
+      background-position: right;
+    }
   }
   &.vertical > separator {
     margin: 0 0 -8px 0;
     padding: 0 0 8px 0;
+    background-repeat: repeat-x;
+    background-position: top;
   }
   > separator.wide {
+    // FIXME: I don't understand this clearly
     min-width: 5px;
     min-height: 5px;
     background-color: transparent;

diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 00d9ae0d113b8b48a65b873e620529f54e17e5ef..57b91c934333c27aa1a8a439b2cebbbe8e5f09af 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4196,20 +4196,29 @@ placesview row.activatable:hover {
 paned > separator {
   min-width: 1px;
   min-height: 1px;
-  background-color: #1c1f1f; }
-  paned > separator:backdrop {
-    background-color: #1f2222; }
+  -gtk-icon-source: none;
+  background-color: transparent;
+  background-image: linear-gradient(to top, #1c1f1f);
+  background-size: 1px 1px; }
   paned > separator:selected {
-    background-color: #215d9c; }
-paned:dir(ltr).horizontal > separator {
-  margin: 0 -8px 0 0;
-  padding: 0 8px 0 0; }
-paned:dir(rtl).horizontal > separator {
-  margin: 0 0 0 -8px;
-  padding: 0 0 0 8px; }
+    background-image: linear-gradient(to top, #215d9c); }
+  paned > separator:backdrop {
+    background-image: linear-gradient(to top, #1f2222); }
+paned.horizontal > separator {
+  background-repeat: repeat-y; }
+  paned.horizontal > separator:dir(ltr) {
+    margin: 0 -8px 0 0;
+    padding: 0 8px 0 0;
+    background-position: left; }
+  paned.horizontal > separator:dir(rtl) {
+    margin: 0 0 0 -8px;
+    padding: 0 0 0 8px;
+    background-position: right; }
 paned.vertical > separator {
   margin: 0 0 -8px 0;
-  padding: 0 0 8px 0; }
+  padding: 0 0 8px 0;
+  background-repeat: repeat-x;
+  background-position: top; }
 paned > separator.wide {
   min-width: 5px;
   min-height: 5px;

diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index a41168e73db89a95be46c833d8ad328ca02dea88..8ff444d96e316db29967e0f828b3861bcfdf784f 100644 (file)
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4372,20 +4372,29 @@ placesview row.activatable:hover {
 paned > separator {
   min-width: 1px;
   min-height: 1px;
-  background-color: #9d9d99; }
-  paned > separator:backdrop {
-    background-color: #a5a5a1; }
+  -gtk-icon-source: none;
+  background-color: transparent;
+  background-image: linear-gradient(to top, #9d9d99);
+  background-size: 1px 1px; }
   paned > separator:selected {
-    background-color: #4a90d9; }
-paned:dir(ltr).horizontal > separator {
-  margin: 0 -8px 0 0;
-  padding: 0 8px 0 0; }
-paned:dir(rtl).horizontal > separator {
-  margin: 0 0 0 -8px;
-  padding: 0 0 0 8px; }
+    background-image: linear-gradient(to top, #4a90d9); }
+  paned > separator:backdrop {
+    background-image: linear-gradient(to top, #a5a5a1); }
+paned.horizontal > separator {
+  background-repeat: repeat-y; }
+  paned.horizontal > separator:dir(ltr) {
+    margin: 0 -8px 0 0;
+    padding: 0 8px 0 0;
+    background-position: left; }
+  paned.horizontal > separator:dir(rtl) {
+    margin: 0 0 0 -8px;
+    padding: 0 0 0 8px;
+    background-position: right; }
 paned.vertical > separator {
   margin: 0 0 -8px 0;
-  padding: 0 0 8px 0; }
+  padding: 0 0 8px 0;
+  background-repeat: repeat-x;
+  background-position: top; }
 paned > separator.wide {
   min-width: 5px;
   min-height: 5px;